<template>
    <div class="container" :style="'height: '+docheight+'px'">
        <leftcont></leftcont>
        <div class="righCont">
            <topcont></topcont>
            <div class="content">
                <div class="setCont">
                  <div class="mainTop">
                    <div class="mainTitle">新增课程</div>
                    <btn value="返回列表" @click="backfn"></btn>
                  </div>
                  <div class="formCont">
                    <el-form :model="userInfo" ref="userInfo" :rules="rules" label-width="120px">
                      <el-form-item label="课程封面">
                        <cropperCom @successCropper="getHeadImg" :propImg="userInfo.course_cover"></cropperCom>
                      </el-form-item>
                      <el-form-item label="课程昵称" prop="course_name">
                        <el-input v-model="userInfo.course_name"></el-input>
                      </el-form-item>
                      <el-form-item label="起购数量">
                        <el-input v-model="userInfo.start_num"></el-input>
                      </el-form-item>
                      <el-form-item label="课程排序">
                        <el-input v-model="userInfo.course_sort"></el-input>
                      </el-form-item>
                      <el-form-item label="课程单位">
                        <el-radio v-model="userInfo.course_unit" :label="1">小时</el-radio>
                        <el-radio v-model="userInfo.course_unit" :label="2">课时</el-radio>
                      </el-form-item>
                      <el-form-item label="课程状态">
                        <el-radio v-model="userInfo.course_status" :label="1">正常</el-radio>
                        <el-radio v-model="userInfo.course_status" :label="2">禁用</el-radio>
                      </el-form-item>
                      <el-form-item label="课程介绍" prop="course_introduce">
                        <el-input type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            v-model="userInfo.course_introduce">
                        </el-input>
                      </el-form-item>
                      <el-form-item label="课程内容">
                        <btn value="+新增课程内容" @click="addContFn"></btn>
                      </el-form-item>
                      <el-form-item label=" ">
                        <div class="contentItem" :key="index" v-for="(item,index) in userInfo.course_content">
                            <el-input v-model="item.name" placeholder="请输入课程内容"></el-input>
                            <el-button class="delBtn" type="danger" @click="delFn(index)" plain>删除</el-button>
                        </div>
                      </el-form-item>
                      <el-form-item label="课程规格">
                      </el-form-item>
                      <el-form-item label=" ">
                        <div class="contentItem noFlex" :key="index" v-for="(item,index) in userInfo.course_rule">
                          <div class="priceTr">
                              <el-input placeholder="请输入规格内容" disabled v-model="item.rule_name">
                                <template slot="prepend">规格内容</template>
                              </el-input>
                            </div>
                            <div class="priceTr">
                              <el-input placeholder="请输入规格单价" v-model="item.price">
                                <template slot="prepend">规格单价</template>
                              </el-input>
                            </div>
                        </div>
                      </el-form-item>
                      <el-form-item class="formImg" label="详情图片">
                        <defUpImg width="150px" @upImgSuccess="getcourse_details_img"></defUpImg>
                      </el-form-item>
                      <el-form-item label="">
                        <btn value="保存" @click="saveFn"></btn>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import leftcont from '@/components/leftCont.vue'
  import topcont from '@/components/topCont.vue'
  import btn from '@/components/public/btn.vue'
  import defUpImg from '@/components/public/defUpImg.vue'
  import { packSave} from '@/http/api'
  import cropperCom from '@/components/public/cropperCom.vue'

    export default {
      components: {cropperCom,leftcont,topcont,btn,defUpImg},
      data() {
        var checkName = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入课程名称'));
            }else{
                return callback()
            }
        };
        var checkcourse_introduce = (rule, value, callback) => {
            if (value=='') {
                return callback(new Error('请输入课程描述'));
            }else{
                return callback()
            }
        };
        return {
            userInfo:{
              course_name:'',
              course_introduce:'',
              start_num:1,
              course_status:1,
              course_unit:1,
              course_cover:'',
              course_details_img:'',
              course_sort:99,
              course_content:[
                {name:''}
              ],
              course_rule:[
                {rule_name:'普通教师',price:1,},
                {rule_name:'高级教师',price:1,},
                {rule_name:'特级教师',price:1,},
              ],
            },
            rules: {
                course_name: [
                    { validator: checkName,required: true,trigger: 'blur' }
                ],
                
                course_introduce:[
                    { validator: checkcourse_introduce,required: true,trigger: 'blur' }
                ],
                
            },
        }
      },
      props: {},
      methods:{
        backfn(){
          this.$router.back()
        },
        addContFn(){
          this.userInfo.course_content.push({name:''})
        },
        delFn(i){
          this.userInfo.course_content.splice(i, 1)
        },
        getHeadImg(src){
          this.userInfo.course_cover = src
        },
        getcourse_details_img(src){
          this.userInfo.course_details_img = src
        },
        saveFn(){
            this.$refs['userInfo'].validate((valid) => {
                if (valid) {
                    if(!this.userInfo.course_cover){
                        this.$message('请上传课程封面')
                        return false
                    }else{
                        this.Submit()
                    }
                } else {
                    return false;
                }
            })
        },
        Submit(){
          let data = this.userInfo
          let loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
          });
          packSave(data).then((res) => {
            if(res.data.code==1){
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.back()
              }, 1500);
            }else{
              this.$message(res.data.msg)
            }
            loading.close();
          }).catch(()=>{
            loading.close();
            this.$message('网络请求超时');
          })
        },
      },
      mounted(){
      },
      created() {
      },
    }
  </script>
  
  <style scoped lang="less">
  .container{
    width: 100%;
    display: flex;
    overflow: hidden;
    .righCont{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 15px;
      height: 100%;
      width: 10px;
      background-color: #F4F8FF;
      .content{
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        overflow: auto;
        .setCont{
          width: 100%;
          padding: 20px;
          box-sizing: border-box;
          background-color: #fff;
          .mainTop{
            display: flex;
            margin-bottom: 25px;
            align-items: center;
            justify-content: space-between;
            .mainTitle{
              font-size: 14px;
              font-weight: bold;
            }
          }
          .formCont{
            width: 600px;
            .contentItem{
              display: flex;
              padding: 15px;
              box-sizing: border-box;
              background-color: #f7f7f7;
              border-radius: 5px;
              align-items: center;
              margin-bottom: 10px;
              .priceTr{
                margin-bottom: 10px;
              }
              .delBtn{
                margin-left: 15px;
                width: 100px;
              }
            }
            .noFlex{
              display: block;
              .delBtn{
                margin-left: 0;
              }
            }
          }
        }
      }
    }
}
  </style>
  <style>
  .el-collapse-item__wrap{
    border-bottom: none;
  }
  .el-collapse{
    border-top: none;
    border-bottom: none;
  }
  .content { overflow: -moz-scrollbars-none; }
  .content::-webkit-scrollbar { width: 0 !important }
  .content { -ms-overflow-style: none; }
 
</style>
<style>
.formImg .el-form-item__content{
 line-height: normal !important;;
}
</style>